<template>
        <div class="register">
                <div class="title">注册页</div>
                <div class="block">
                        <input type="text"
                               v-model="formData.phone"
                               placeholder="输入手机号">
                </div>
                <div class="block">
                        <input type="password"
                               v-model="formData.pass"
                               placeholder="输入密码">
                </div>
                <div class="block">
                        <input type="password"
                               v-model="formData.checkpass"
                               placeholder="输入确认密码">
                </div>
                <div class="block">
                        <input type="button"
                               value="注册"
                               @click="register">
                </div>
        </div>
</template>

<script>
import { Toast } from 'vant';

import { user_register } from '../utils/api'
export default {
        data () {
                return {
                        formData: {
                                phone: '',
                                pass: '',
                                checkpass: ''
                        }
                }
        },
        methods: {
                register () {
                        if (/^1[3-9]\d{9}$/.test(this.formData.phone) == false) {
                                alert('请输入合法的手机号');
                        } else if (!this.formData.pass || !this.formData.checkpass) {
                                alert('请输入密码/确认密码')
                        } else if (this.formData.pass !== this.formData.checkpass) {
                                alert('密码和确认密码不一致');
                        } else { //验证通过 

                                //深拷贝formData
                                var newFormData = JSON.parse(JSON.stringify(this.formData));
                                //删除对象的checkpass属性
                                delete newFormData.checkpass;

                                //发起注册请求
                                user_register(newFormData).then((res) => {
                                        console.log(res.data)
                                        if (res.data.code == 200) { //注册成功
                                                Toast.success('注册成功!')
                                                //跳转到登录页
                                                this.$router.push('/denglu ');
                                        } else {
                                                Toast.fail(res.data.msg)
                                        }
                                })

                        }
                }



        }

}
</script>


<style lang='scss' scoped>
.register {
        margin: 50px 20px;
}
.register .title {
        font-weight: bold;
        text-align: center;
        line-height: 40px;
}
.register .block {
        margin: 20px 0;
}
.register .block input {
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 20px;
        padding-left: 20px;
        box-sizing: border-box;
        outline: none;
        width: 100%;
}
</style>